{% extends "finance/base.html" %}
{% load humanize %}

{% block content %}
<style>
  .comparison-wrap { width:100%; overflow-x:auto; }
  .comparison-table { min-width:1050px; width:100%; border-collapse:collapse; table-layout:auto; }
  .comparison-table th { background:#56636f; color:#fff; text-align:center; vertical-align:middle; white-space:nowrap; border:1px solid #68747e; }
  .comparison-table td { white-space:nowrap; border-left:1px solid #e1e4e7; border-right:1px solid #e1e4e7; padding:5px 7px; font-size:0.9rem; }
  .comparison-table th { padding:7px 6px; }
  .month-group { border-left:2px solid #fff !important; }
  .quarter-nav { display:flex; justify-content:center; align-items:center; gap:12px; margin:10px 0 14px; }
  .quarter-nav .btn { min-width:42px; }
  .comparison-table tbody tr:nth-child(even) td { background:#f3f4f5; }
  .comparison-table .num { text-align:right; font-variant-numeric:tabular-nums; }
  .comparison-table .total { font-weight:700; }
  .comparison-table .account-name { min-width:230px; }
  .delta-positive { color:#198754; }
  .delta-negative { color:#dc3545; }
  .filter-panel { background:#f3f5f7; padding:12px; border-radius:5px; margin-bottom:14px; }
</style>
<div class="container-fluid px-3">
  <div class="d-flex flex-wrap justify-content-between align-items-center mb-3 gap-2">
    <div>
      <h3 class="mb-1">Budget Version Comparison</h3>
      <div class="text-muted">Compare up to three saved versions. This screen is read-only and does not change the active budget.</div>
    </div>
    <a href="{% url 'budget' %}?year={{ year }}" class="btn btn-secondary">Back to Entry Budget / WP&amp;B</a>
  </div>

  <form method="get" class="filter-panel">
    <input type="hidden" name="quarter" value="{{ quarter }}">
    <div class="row g-2 align-items-end">
      <div class="col-6 col-md-2">
        <label class="form-label">Budget Year</label>
        <select name="year" class="form-select" onchange="this.form.submit()">
          {% for y in years %}<option value="{{ y }}" {% if y == year %}selected{% endif %}>{{ y }}</option>{% endfor %}
        </select>
      </div>
      {% for n in "123" %}
      <div class="col-6 col-md-2">
        <label class="form-label">Version {{ n }}</label>
        <select name="v{{ n }}" class="form-select">
          <option value="">— Not selected —</option>
          {% for version in versions %}
          <option value="{{ version.id }}" {% if version.id|stringformat:"s" == selected_v1 and n == "1" or version.id|stringformat:"s" == selected_v2 and n == "2" or version.id|stringformat:"s" == selected_v3 and n == "3" %}selected{% endif %}>
            V{{ version.version_no }}{% if version.status == 'ACTIVE' %} — ACTIVE{% endif %} · {{ version.effective_date|date:"d-m-Y" }}
          </option>
          {% endfor %}
        </select>
      </div>
      {% endfor %}
      <div class="col-12 col-md-2">
        <label class="form-label">Search Account</label>
        <input type="text" name="search" value="{{ search }}" class="form-control" placeholder="Account No / Name">
      </div>
      <div class="col-8 col-md-1">
        <label class="form-label">Status</label>
        <select name="budget_status" class="form-select">
          <option value="all" {% if budget_status == 'all' %}selected{% endif %}>All</option>
          <option value="budgeted" {% if budget_status == 'budgeted' %}selected{% endif %}>Budgeted</option>
          <option value="non_budgeted" {% if budget_status == 'non_budgeted' %}selected{% endif %}>Non Budgeted</option>
        </select>
      </div>
      <div class="col-4 col-md-1"><button class="btn btn-primary w-100" type="submit">Compare</button></div>
    </div>
    <div class="small text-muted mt-2">Tampilan dibatasi per kuartal agar angka lebih mudah dibaca. Selisih dihitung terhadap Version 1 untuk total kuartal.</div>
  </form>

  {% if not selected_headers %}
    <div class="alert alert-info">Belum ada versi budget untuk tahun {{ year }}. Silakan upload budget terlebih dahulu.</div>
  {% else %}
    <div class="quarter-nav">
      <a class="btn btn-outline-secondary" aria-label="Previous quarter" href="?year={{ year }}&quarter={{ prev_quarter }}&v1={{ selected_v1 }}&v2={{ selected_v2 }}&v3={{ selected_v3 }}&search={{ search|urlencode }}&budget_status={{ budget_status }}">&lt;</a>
      <h5 class="mb-0">{{ quarter_label }} · {{ quarter_months.0 }}–{{ quarter_months.2 }} {{ year }}</h5>
      <a class="btn btn-outline-secondary" aria-label="Next quarter" href="?year={{ year }}&quarter={{ next_quarter }}&v1={{ selected_v1 }}&v2={{ selected_v2 }}&v3={{ selected_v3 }}&search={{ search|urlencode }}&budget_status={{ budget_status }}">&gt;</a>
    </div>
    <div class="mb-2 d-flex flex-wrap gap-2">
      {% for version in selected_headers %}
      <span class="badge {% if version.status == 'ACTIVE' %}bg-success{% else %}bg-secondary{% endif %}">V{{ version.version_no }} · {{ version.status }} · Effective {{ version.effective_date|date:"d-m-Y" }}</span>
      {% endfor %}
    </div>
    <div class="comparison-wrap">
      <table class="table table-sm comparison-table">
        <thead>
          <tr><th rowspan="2">No</th><th rowspan="2">Account No</th><th rowspan="2">Account Name</th>
          {% for month in quarter_months %}<th class="month-group" colspan="{{ selected_headers|length }}">{{ month }}</th>{% endfor %}
          <th rowspan="2" class="month-group">Quarter Total V1</th>
          {% for item in selected_headers %}{% if not forloop.first %}<th rowspan="2">Δ Q vs V1</th><th rowspan="2">Δ %</th>{% endif %}{% endfor %}
          </tr>
          <tr>{% for month in quarter_months %}{% for item in selected_headers %}<th class="{% if forloop.first %}month-group{% endif %}">V{{ item.version_no }}</th>{% endfor %}{% endfor %}</tr>
        </thead>
        <tbody>
          {% for row in rows %}<tr>
            <td>{{ forloop.counter }}</td><td>{{ row.acct_no }}</td><td class="account-name">{{ row.acct_name }}</td>
            {% for month_index in "012" %}{% for v in row.versions %}<td class="num {% if forloop.first %}month-group{% endif %}">{% if month_index == "0" %}{{ v.quarter_months.0|floatformat:2|intcomma }}{% elif month_index == "1" %}{{ v.quarter_months.1|floatformat:2|intcomma }}{% else %}{{ v.quarter_months.2|floatformat:2|intcomma }}{% endif %}</td>{% endfor %}{% endfor %}
            <td class="num total month-group">{% if row.versions %}{{ row.versions.0.quarter_total|floatformat:2|intcomma }}{% else %}0.00{% endif %}</td>
            {% for d in row.deltas %}<td class="num {% if d.amount > 0 %}delta-positive{% elif d.amount < 0 %}delta-negative{% endif %}">{{ d.amount|floatformat:2|intcomma }}</td><td class="num">{% if d.percent != None %}{{ d.percent|floatformat:2 }}%{% else %}—{% endif %}</td>{% endfor %}
          </tr>{% empty %}<tr><td colspan="20" class="text-center text-muted py-4">Tidak ada account yang sesuai filter.</td></tr>{% endfor %}
        </tbody>
      </table>
    </div>
  {% endif %}
</div>
{% endblock %}